import { useIntersectionObserver } from '@vueuse/core'
// 图片懒加载插件
export const lazyPlugin = {
  install(app) {
    // 定义全局指令 图片懒加载
    app.directive("img-lazy", {
      mounted(el, binding) {
        // el:指代img元素
        // binding：指代指令后面绑定的表达式的值
        // console.log(el, binding.value, 'img-lazy');

        // 基于@vueuse/core,判断加载图片是否进入视图
        const { stop } = useIntersectionObserver(
          el,//目标对象
          ([{ isIntersecting }],) => {
            // 是否进入视图区域
            if (isIntersecting) {
              el.src = binding.value
              // 赋值之后停止监听
              stop()
            }
          })
      }
    })
  }
}